﻿<div class="knob-control sizeref">
    <div class="sizeref" data-bind="msGestureChange: drag">
        <div class="knob-circle bd-bg2 bg-bg1">
            <div class="knob-line" data-bind="style: {transform: handTransform()}">
                <div class="knob-hand bg-fg1"></div>
            </div>
        </div>
        <div class="knob-dot left bg-fg1"></div>
        <div class="knob-dot right bg-fg1"></div>
    </div>


    <!--svg viewBox="0 0 100 100" data-bind="tooltip: { title: 'niggers', container: 'body' }, event: { scroll: scroll }">
        <circle cx="50" cy="50" r="42" stroke-width="4" fill="#333" stroke="#555" />
        <g transform="translate(50, 50)">
            <path d="M 0 0" class="stroke-fg1" fill="none" stroke-width="5" data-bind="attr: {d: highlightPath}" />
            <line class="stroke-txt" x1="-50" x2="-15" stroke-width="4" data-bind="attr: {transform: handTransform}" />
        </g>
        <circle class="fill-fg2" r="3" cx="10" cy="97" />
        <circle class="fill-fg2" r="3" cx="90" cy="97" />
    </svg-->
</div>